<template>
  <view
    class="navbar"
    :style="{
      paddingTop: safeArea.top + 'px',
      'background-color': styleData.background,
    }">
    <view
      class="title"
      :style="{
        color: styleData.color
      }">
      {{ styleData.text }}
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: {
    styleData: {
      type: Object,
      default: null,
    },
  },
  computed: {
    ...mapState(["safeArea", "capsule"]),
  },
};
</script>

<style lang="scss" scoped>
.navbar {
  padding: 0 24rpx;
  background-size: cover;
  .title {
    margin-top: 10rpx;
    display: flex;
    justify-content: center;
    height: 65rpx;
  }
}
</style>
